<template>
    <div class="">
        <el-dialog title="系统消息" v-dialogDrag :visible.sync="noticeDialog" width="826px" :close-on-click-modal="false" :append-to-body="true">
            <div class="official_website flex-hbvc">
                <p>{{ boxInfo.masterDomain }}</p>
                <img src="@/assets/logo/path.png" alt="" />
            </div>
            <ul v-if="this.sysTotal !== 0 ? true : false">
                <li class="meassage_box" v-for="(item, index) in systemList" :key="index">
                    <h3>{{ item.memMessageTitle }}</h3>
                    <p class="meassage_text">
                        {{ JSON.parse(item.memMessageContent).message }}
                    </p>
                    <p class="shijian">{{ item.memCreateTime }}</p>
                    <div class="button_meassage">
                        <el-button @click="handleDelete(item)" style="float: right; padding: 1px 1px; color: #fff; font-size: 16px" type="text" icon="el-icon-close"></el-button>
                    </div>
                </li>
            </ul>
            <!-- 暂无数据 -->
            <div v-if="this.sysTotal === 0 ? true : false" style="text-align: center; height: 500px">
                <img style="width: 105px; height: 90px; margin-top: 150px" src="@/assets/no_data.png" alt="" />
                <p class="nodata">暂无系统消息~</p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { system_messages, dateMemDels, } from '@/api/url'
export default {
  props: {},
  created () { },
  data () {
    return {
      noticeDialog: false,//公告弹窗
      pageNum: 1,
      pageSize: 1000,
      sysTotal: 0, // 系统总条数
      systemList: [],
      boxInfo: '',//盒子基本信息
    }
  },
  mounted () {
    this.$EventBus.$on('boxInfo_user', data => { this.boxInfo = data })
  },
  methods: {
    // 查询系统消息
    async system_messages (value) {
      try {
        const res = await system_messages(value)
        if (res.data.code === 200) {
          //   console.log(res)
          this.systemList = res.data.rows
          this.sysTotal = res.data.total
        } else {
          console.log()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 删除我的消息
    handleDelete (row) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        // 确认删除
        .then(() => {
          // 删除接口只需要传个id就行了 id是当前点击事件传过来的的id
          dateMemDels({
            memMessageId: row.memMessageId
          }).then((res) => {
            // console.log(res)
            if (res.data.code === 200) {
              this.$message({ message: '删除成功', type: 'success', center: true })
              // 删除成功 回调列表接口
              this.system_messages(this.list)
              this.game_messages(this.list)
            } else {
              this.$message.error(res.msg)
            }
          })
        })
        // 取消删除
        .catch(() => { })
    },
  },
  computed: {},
  watch: {},
  components: {},
  beforeDestroy () {
    this.$EventBus.$off('boxInfo_user')
  },
}
</script>

<style scoped lang='less'>
/deep/ .el-dialog__body {
    height: 100% !important;
    padding: 10px 10px 7px !important;
    background: url('@/assets/dialogImg/userinfo_bg.png');
}
.official_website {
    position: absolute;
    top: 16px;
    left: 333px;
    width: 161px;
    height: 24px;
    background: linear-gradient(180deg, #863520, #721011 99%);
    border-radius: 12px;
    justify-content: flex-end;
    cursor: pointer;
    &:hover {
        background: linear-gradient(180deg, #612212, #5d090a);
    }
    p {
        width: 110px;
        font-size: 14px;
        font-family: '微软雅黑';
        font-weight: 400;
        text-align: left;
        color: #ffffff;
    }
    img {
        width: 14px;
        height: 14px;
        margin-right: 12px;
        background: rgba(0, 0, 0, 0);
    }
}
ul {
    height: 500px;
    overflow: auto;
}
li {
    min-height: 60px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
    padding: 10px;
}
.nodata {
    margin-top: 20px;
    padding: 10px;
    color: #b28989;
}
h3 {
    font-size: 13px;
    font-family: '微软雅黑';
    font-weight: 400;
    color: #fffae3;
    letter-spacing: 0.45px;
}
.meassage_text {
    font-size: 12px;
    font-family: '微软雅黑';
    text-align: left;
    color: #fffae3;
    letter-spacing: 0.48px;
}
.shijian {
    font-size: 12px;
    font-family: '微软雅黑';
    text-align: right;
    color: #fffae3;
}
.meassage_box {
    position: relative;
    &:hover {
        .button_meassage {
            display: block;
            width: 20px;
            height: 20px;
        }
        h3 {
            color: #ffbd6c;
        }
        .meassage_text {
            color: #ffbd6c;
        }
        .shijian {
            color: #ffbd6c;
        }
    }
}
.button_meassage {
    position: absolute;
    right: 0;
    top: 0px;
    width: 20px;
    height: 20px;
    background-color: #ffbd6c;
    display: none;
}
</style>
